<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加数据</title>
    <link href="./CSS-2.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div>
        <table>
            <tr>
                <th colspan="6">
                    <h1>用户新增</h1>
                </th>
            </tr>
            <tr>
                <td>编号</td>
                <td>姓名<input type="text" v-model.trim="userAdd.name" placeholder="输入姓名以添加..."/></td>
                <td>年龄<input type="text" v-model.number="userAdd.age" placeholder="输入年龄以添加..."/></td>
                <td>性别<input type="text" v-model.trim="userAdd.sex" placeholder="输入性别以添加..."/></td>
                <td>
                    <button @click="confirmAdd()" class="add">添加</button>
                </td>
                <td>
                    <button @click="clearUser(userAdd)" class="cancle">清空</button>
                </td>
            </tr>
        </table>
        <!-- <table class="tableClass1">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th colspan="2">操作</th>
    </tr>
    <tr v-for="(user1,index) in userList">
        <td v-text="user1.id"></td>
        <td v-text="user1.name"></td>
        <td v-text="user1.age"></td>
        <td v-text="user1.sex"></td>
        <td><button @click="" class="update">修改</button></td>
        <td><button @click="" class="del">删除</button></td>
    </tr>
</table> -->
    </div>

</div>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script>
    /* restFul风格 url都是/VueAxios/user/参数 */
    /* 公共url前缀 */
    axios.defaults.baseURL = `http://127.0.0.1:8090`
    const APP = new Vue({
        //不要忘记# .等符号
        el: '#app',
        data: {
            url: '/VueAxios/user',
            // userList: [],
            userAdd: {
                id: '',
                name: '',
                age: '',
                sex: ''
            }
        },
        methods: {
            // async getUserList() {
            // 	let {
            // 		data: value
            // 	} = await axios.get(`${this.url}`)
            // 	this.userList = value
            // },
            async add() {
                let name = this.userAdd.name
                let age = this.userAdd.age
                let sex = this.userAdd.sex
                await axios.post(`${this.url}/${name}/${age}/${sex}`)
                // this.getUserList()
            },
            confirmAdd() {
                if (!this.userIsEmpty(this.userAdd)) {
                    if (this.confirmPanel('添加')) {
                        this.add()
                        this.clearUser(this.userAdd)
                    }
                }
            },
            /* 工具方法 */
            //判断输入的user是否为空
            userIsEmpty(user) {
                if (user.name == 0 || user.age == 0 || user.sex == 0) {
                    alert("不能为空!")
                    return 1
                } else {
                    return 0
                }
            },
            //确认框
            confirmPanel(confirmWord) {
                return confirm(`确认${confirmWord}??`)
            },
            //清空参数user
            clearUser(user) {
                user.id = ''
                user.name = ''
                user.age = ''
                user.sex = ''
            }
        },
        // mounted() {
        // 	// this.getUserList()
        // }
    })
</script>
</body>
</html>
